<template>
  <div>
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="control">
      <!-- 司机姓名 -->
      <div class="inputItem">
        <div class="title">司机姓名</div>
        <div class="inputBox">
          <el-input v-model="driverName" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>
      <!-- 手机号 -->
      <div class="inputItem">
        <div class="title">推广人</div>
        <div class="inputBox">
          <el-input v-model="promoter" @keyup.enter.native="getList(1)">
          </el-input>
        </div>
      </div>
      <div style="margin-bottom: 10px;">
        <!-- 查询 -->
        <el-button type="primary" size="small" icon="el-icon-search" @click="getList(1)">查询</el-button>
        <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
      </div>

    </div>
    <div class="main">
      <div class="list" ref="getHeight">
        <el-table :data="records" style="width: 100%">
          <el-table-column align="center"  label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="driverName" label="司机姓名">
          </el-table-column>
          <el-table-column align="center" prop="money" label="金额">
          </el-table-column>
          <el-table-column align="center" prop="ydriverName" label="推广人">
          </el-table-column>
          <el-table-column align="center" prop="phoneNumber" label="推广人电话">
            <template slot-scope="scope">
              <div v-if="scope.row.phoneNumber!=null">
                {{ scope.row.phoneNumber }}
              </div>
              <div v-else-if="scope.row.companyTel!=''">
                {{ scope.row.companyTel }}
              </div>
              <div v-else>
                {{ scope.row.headTel }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="邀请时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" v-if="scope.row.status !== 1" size="small"
                  @click="open(scope.row.cid)">结算</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>




  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";


export default {
  data() {
    return {

      data: {
        total: 0,
        size: 10,
      },
      driverName: '',
      promoter: '',
      pageCurrent: 1,
      size: 10,
      records: [],
   

    };
  },
  methods: {
    open(cid) {
      this.$confirm('此操作将结算该推广, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          cid: cid,
          status: '1'
        }
        httpApi.basicSettingApi.modifyDriverCode(params).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '结算成功!'
            });
            this.getList()
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消结算'
        });
      });
    },

    getList(initCurrent) {
      let params = {
        pageSize: 10,
        pageIndex: initCurrent || this.pageCurrent,
        driverName: this.driverName,
        userName: this.promoter
      };
      httpApi.basicSettingApi.queryDriverCode(params).then((res) => {
        this.records = res.data.data.records;
        this.data = res.data.data;

      });
    },

    clearUp() {
      this.driverName = '',
        this.promoter = '',
        this.pageCurrent = 1;
      this.getList()
    },
    changePages(val) {
      this.pageCurrent = val;
      this.getList();
    },

  },
  mounted() {
  
    if(this.$route.query.keyWord!=undefined){
      this.driverName=this.$route.query.keyWord
    }
    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body .driverList {
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .el-dialog .el-dialog__body .inputItem {
  display: flex;
  align-items: center;
  margin-right: 23px;

  >.title {
    color: #262626;
    font-size: 12px;
    margin-right: 7px;
  }

  >.inputBox {
    width: 160px;
    margin-right: 7px;

    .el-input__inner {
      height: 32px;
      font-size: 12px;
    }

    ::v-deep .el-input__inner::placeholder {
      color: #c3c3c3;
      font-size: 12px;
    }
  }
}

.control {
  height: 76px;
  display: flex;
  width: 100%;
  background-color: #fff;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 29px;
  margin-bottom: 8px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;
    margin-bottom: 10px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      ::v-deep .el-input__icon {
        line-height: 0;
      }

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 211px);
  background-color: #fff;
  padding: 24px 30px 0 30px;

  .addBtn {
    text-align: right;
    margin-bottom: 16px;
  }

  .list {
    height: calc(100% - 49px);

    // 表头样式
    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 332px) !important;
      overflow-y: scroll;
    }

    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}
</style>

<style lang="scss">
.zdy_dialog_driverListDetail {
  height: 100vh;
  margin: 0 !important;
  position: fixed;
  right: 0;
  min-width: 500px;
  overflow-y: scroll;

  .dialog_header {
    display: flex;

    >.icon-dairenzhengsiji {
      font-size: 43px;
      color: #1890ff;
    }

    .infoBox {
      margin-left: 13px;

      >.info {
        display: flex;
        margin-bottom: 7px;
        align-items: center;

        >.name {
          color: #262626;
          font-size: 18px;
          margin-right: 8px;
        }

        .tagAudit {
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          padding: 5px 8px 4px;
          border-radius: 4px;
          display: inline-block;
          margin-right: 6px;
        }

        >.gender {
          background-color: #ecf5fe;
          font-size: 10px;
          color: #1890ff;
          border-radius: 4px;
          padding: 4px 7px 3px;
          display: inline-block;
        }
      }

      .text {
        display: flex;
        color: #939393;
        font-size: 12px;

        .afterLine::after {
          content: "|";
          color: #939393;
          margin-left: 11px;
          margin-right: 12px;
        }
      }
    }
  }

  .dialog_body {
    >.title {
      height: 60px;
      display: flex;
      align-items: center;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >h3 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
      }

      .center_line {
        flex: 1;
        height: 1px;
        background-color: #f0f0f0;
        margin-left: 14px;
      }
    }

    .picBox {
      display: flex;
      width: 400px;
      overflow-x: scroll;

      .pic_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 32px;

        .pic {
          width: 109px;
          height: 71px;
        }

        >span {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
